<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Base64 Image with 6 Digits</title>
</head>
<body>
<canvas id="digitCanvas" width="200" height="100" style="display:none;"></canvas>
<img id="base64Image" alt="Base64 Image with 6 Digits" />

<script>
    function generateBase64ImageWithSixDigits() {
        // 1. 生成一个 6 位数字
        const sixDigits = Math.floor(100000 + Math.random() * 900000).toString();

        // 2. 获取 canvas 元素并设置上下文
        const canvas = document.getElementById('digitCanvas');
        const ctx = canvas.getContext('2d');

        // 3. 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 4. 设置字体样式
        ctx.font = '48px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = 'black'; // 文字颜色

        // 5. 在画布中心绘制 6 位数字
        ctx.fillText(sixDigits, canvas.width / 2, canvas.height / 2);

        // 6. 将 canvas 转换为 Base64 编码的 PNG 图片
        const base64Image = canvas.toDataURL('image/png');

        // 7. 将生成的 Base64 图片显示在页面上
        const imgElement = document.getElementById('base64Image');
        imgElement.src = base64Image;

        // 8. 返回 Base64 字符串
        return base64Image;
    }

    // 调用函数并输出结果
    const base64String = generateBase64ImageWithSixDigits();
    console.log(base64String);
</script>
</body>
</html>
